<template>
  <view class="container">
    <!-- 顶部工具栏 -->
    <view class="toolbar">
      <text class="iconfont icon-qrcode"></text>
      <text class="iconfont icon-settings" @tap="goToSettings"></text>
    </view>

    <!-- 用户信息 -->
    <view class="user-info">
      <image class="avatar" src="/static/images/avatar1.jpg" mode="aspectFill"></image>
      <view class="info">
        <view class="name">晚风心里吹</view>
        <view class="level">Lv.1<text class="gender">男</text></view>
      </view>
      <view class="stats">
        <view class="stat-item">
          <text class="num">104</text>
          <text class="label">关注</text>
        </view>
        <view class="stat-item">
          <text class="num">6,152</text>
          <text class="label">粉丝</text>
        </view>
        <view class="stat-item">
          <text class="num">6.1万</text>
          <text class="label">获赞</text>
        </view>
      </view>
      <view class="assets">
        <view class="asset-item">
          <text class="label">优惠券:</text>
          <text class="value">3张</text>
        </view>
        <view class="asset-item">
          <text class="label">金币:</text>
          <text class="value">30,000个</text>
        </view>
      </view>
    </view>

    <!-- 我的订单 -->
    <view class="card order-card">
      <view class="card-header">
        <text class="title">我的订单</text>
        <view class="more" @tap="goToAllOrders">
          <text>全部订单</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
      <view class="order-grid">
        <view class="grid-item" @tap="goToOrderList('pending')">
          <text class="iconfont icon-wallet"></text>
          <text>待付款</text>
        </view>
        <view class="grid-item" @tap="goToOrderList('unused')">
          <text class="iconfont icon-ticket"></text>
          <text>未使用</text>
        </view>
        <view class="grid-item" @tap="goToOrderList('review')">
          <text class="iconfont icon-comment"></text>
          <text>待评价</text>
        </view>
      </view>
    </view>

    <!-- 基础服务 -->
    <view class="card service-card">
      <view class="card-header">
        <text class="title">基础服务</text>
      </view>
      <view class="service-grid">
        <view class="grid-item" @tap="goToService('scenic')">
          <text class="iconfont icon-scenic"></text>
          <text>景票发布</text>
        </view>
        <view class="grid-item" @tap="goToService('hotel')">
          <text class="iconfont icon-hotel"></text>
          <text>酒店订单</text>
        </view>
        <view class="grid-item" @tap="goToService('flight')">
          <text class="iconfont icon-plane"></text>
          <text class="new">NEW</text>
          <text>我的机票</text>
        </view>
        <view class="grid-item" @tap="goToService('car')">
          <text class="iconfont icon-car"></text>
          <text class="new">NEW</text>
          <text>我的车票</text>
        </view>
        <view class="grid-item" @tap="goToService('coin')">
          <text class="iconfont icon-coin"></text>
          <text>我的金币</text>
        </view>
        <view class="grid-item" @tap="goToService('collect')">
          <text class="iconfont icon-star"></text>
          <text>我的收藏</text>
        </view>
        <view class="grid-item" @tap="goToService('service')">
          <text class="iconfont icon-service"></text>
          <text>联系客服</text>
        </view>
        <view class="grid-item" @tap="goToService('feedback')">
          <text class="iconfont icon-feedback"></text>
          <text>意见反馈</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    goToSettings() {
      uni.navigateTo({
        url: '/pages/settings/index'
      })
    },
    goToAllOrders() {
      uni.navigateTo({
        url: '/pages/order/list'
      })
    },
    goToOrderList(type) {
      uni.navigateTo({
        url: `/pages/order/list?type=${type}`
      })
    },
    goToService(type) {
      const urls = {
        scenic: '/pages/scenic/publish',
        hotel: '/pages/hotel/orders',
        flight: '/pages/flight/orders',
        car: '/pages/car/orders',
        coin: '/pages/wallet/coin',
        collect: '/pages/user/collect',
        service: '/pages/service/index',
        feedback: '/pages/feedback/index'
      }
      uni.navigateTo({
        url: urls[type]
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 30rpx;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background: #4080ff;

  .iconfont {
    font-size: 40rpx;
    color: #fff;
  }
}

.user-info {
  background: #4080ff;
  padding: 0 30rpx 30rpx;
  color: #fff;

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(255,255,255,0.2);
  }

  .info {
    margin: 20rpx 0;

    .name {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .level {
      font-size: 24rpx;
      background: rgba(255,255,255,0.2);
      display: inline-block;
      padding: 4rpx 16rpx;
      border-radius: 20rpx;

      .gender {
        margin-left: 10rpx;
      }
    }
  }

  .stats {
    display: flex;
    margin-bottom: 20rpx;

    .stat-item {
      margin-right: 40rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .num {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 4rpx;
      }

      .label {
        font-size: 24rpx;
        opacity: 0.8;
      }
    }
  }

  .assets {
    display: flex;

    .asset-item {
      margin-right: 40rpx;
      font-size: 24rpx;
      opacity: 0.8;

      .value {
        margin-left: 10rpx;
      }
    }
  }
}

.card {
  background: #fff;
  border-radius: 12rpx;
  margin: 20rpx;
  padding: 30rpx;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .more {
      font-size: 24rpx;
      color: #999;
      display: flex;
      align-items: center;

      .icon-arrow-right {
        margin-left: 6rpx;
      }
    }
  }
}

.order-grid {
  display: flex;
  justify-content: space-around;

  .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .iconfont {
      font-size: 48rpx;
      color: #4080ff;
      margin-bottom: 10rpx;
    }

    text {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;

  .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .iconfont {
      font-size: 48rpx;
      color: #4080ff;
      margin-bottom: 10rpx;
    }

    text {
      font-size: 24rpx;
      color: #666;
    }

    .new {
      position: absolute;
      top: -10rpx;
      right: 0;
      background: #ff4d4f;
      color: #fff;
      font-size: 20rpx;
      padding: 2rpx 8rpx;
      border-radius: 10rpx;
    }
  }
}
</style> 